<template>
	<public-view navType="other" navTitle="开直播">
		<view class="content flex f-d-c">
			<view class="tip-box f-s-24  color-999">
				<text class="xing">*</text>直播间名称
			</view>
			<view class="video-name-box flex a-i-c">
				<view class="title f-s-28 f-w-b">
					直播间名称
				</view>
				<input v-model="data.content" type="text" class="f-s-24" placeholder-class="color-999" placeholder="请输入直播间名称" :disabled="data.examine_state == 0">
			</view>
			<view class="tip-box f-s-24  color-999">
				<text class="xing">*</text>上传直播封面图
			</view>
			<view class="video-upload-box all-center" @click="changePic">
				<image class="add-icon" src="@/static/images/live/white-add-icon.svg" mode="" v-if="!data.image"></image>
				<image style="width:100%;height:100%" :src="data.image" mode="" v-else></image>
			</view>
			<view class="tip-box f-s-24  color-999" v-if="!data?.user?.internal">
				<text class="xing">*</text>上传相关资质
			</view> 
			<view class="video-upload-box all-center" @click="changeMa" v-if="!data?.user?.internal">
				<image class="add-icon" src="@/static/images/live/white-add-icon.svg" mode="" v-if="!data.material"></image>
				<image style="width:100%;height:100%" :src="data.material" mode="" v-else></image>
			</view>
			<view class="tip-box f-s-24  color-999" v-if="!data?.user?.internal">
				<text class="xing">*</text>直播带货
			</view>
			<view class="video-name-box flex a-i-c j-c-b" v-if="!data?.user?.internal">
				<view class="title f-s-28 f-w-b">
					是否开启直播带货
				</view>
				<switch style="transform: scale(0.7);" color="#2567F3" :checked="data.commerce" @change="changeCommerce" :disabled="data.examine_state == 0 ||data.examine_state == 1 || data?.order?.pay_time" @click.stop.prevent="check_order"/>
			</view>
			<view class="tip-box f-s-24 color-999 flex a-i-c" v-if="!data?.user?.internal">
				<image class="tip-icon" src="@/static/images/live/live-tip-icon.svg" mode=""></image>开启直播带货需要缴纳保证金<text style="color: #F32E2E;">¥200</text>
				<text style="margin-left:20px" v-if="btn_status === 4 && data.order.pay_time != null && data?.order?.cancel_status == 0">已支付</text>
			</view>
			<bottom-btn :positon="true" @click.stop.prevent="apply_live" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 0">申请</bottom-btn>
			<bottom-btn :positon="true" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 1" :disabled="true">审核中</bottom-btn>
			<bottom-btn :positon="true" @click.stop.prevent="pay_live" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 5" :disabled="false">立即支付</bottom-btn>
			<bottom-btn :positon="true" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 2" :disabled="true">驳回待修改</bottom-btn>
			<bottom-btn :positon="true" @click.stop.prevent="apply_live" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 3">重新申请</bottom-btn>
			<bottom-btn :positon="true" @click.stop.prevent="start_live" :style="{position: data?.user?.internal? 'absolute': ''}" v-if="btn_status === 4">开播</bottom-btn>
			<pay-type-popup ref="payTypePopup" popupType="live" :item="data?.order" @refresh="refreshOrder"></pay-type-popup>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import payTypePopup from "@/components/myComponents/payTypePopup.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"bottom-btn":bottomBtn,
			"pay-type-popup":payTypePopup
		},
		data() {
			return {
				json_str: '',
				data:{
					content:'',
					image:'',
					material:'',
					commerce:0
				}
			};
		},
		onShow() {
			let that = this
			if (JSON.stringify(that.data) == that.json_str) this.getLiveInfo()
		},
		onLoad() {
			this.json_str = JSON.stringify(this.data)
			this.getLiveInfo()

		},
		computed:{
			btn_status(){
				let that = this
				if ((that.data?.order?.id && that.data?.order?.cancel_status == 0) && that.data.examine_state == 0 && that.data?.order?.status == 0 && that.data?.order.pay_time  == null) {
					return 5;
				}
				if (that.data?.user?.internal || (false)) {
					return 4;
				}
				if ((JSON.stringify(that.data) != that.json_str && that.data.examine_state != 2) || !that.data.id) {
					return 0;
				}
				if (that.data.id && that.data.examine_state == 0) {
					return 1;
				}

				if (that.data.id && that.data.examine_state == 2) {
					if (JSON.stringify(that.data) == that.json_str) {
						return 2;
					} else {
						return 3;
					}
				}

				
			}
		},
		methods:{
			goTo,
			check_order() {
				let that = this
				if (that.data.order.pay_time) {
					uni.showToast({
						icon:'none',
						title: '保证金已支付'
					})
				}
			},
			pay_live() {
				let that = this
				if (that.data.order.id) {
					that.$refs.payTypePopup.show()
				}
			},
			changeCommerce(e){
				this.data.commerce = e.detail.value? 1: 0;
			},
			getLiveInfo() {
				let that = this
				that.util.postRequest({
					url:'v1/live/info'
					
				}).then(res => {
					if (res.data.id) {
						that.data = res.data
						that.json_str = JSON.stringify(that.data)
					}
					
				}).catch(err => {

				})
			},
			start_live() {
				uni.showLoading({
				  mask: true,
				})
				// 开播
				let that = this;
				let data = that.data;
				if (!data.content) {
					uni.showToast({
					  title: '请输入直播间名称',
					  icon: 'none',
					})
					uni.hideLoading()
					return
				}
				if (!data.content) {
					uni.showToast({
					  title: '请上传直播间封面图',
					  icon: 'none',
					})
					uni.hideLoading()
					return
				}

				if (that.data.user.internal == 1) {
					that.util.postRequest({
						url:'v1/live/apply_live',
						data
					}).then(res => {
						uni.hideLoading()

						if (res.code != 1) {
							uni.showToast({
								icon:'none',
								title: res.msg || '开播失败'
							})
							return
						}
						// let t = setTimeout(() => {
						this.goTo({url:`/pages/live/index/openLive`})
							// clearTimeout(t)
						// }, 1000)
					}).catch(err => {
						uni.hideLoading()
					})
				}
				
			},
			apply_live(){
				let that = this
				let data = that.data
				if (!data.content) {
					uni.showToast({
					  title: '请输入直播间名称',
					  icon: 'none',
					})
					return
				}
				if (!data.content) {
					uni.showToast({
					  title: '请上传直播间封面图',
					  icon: 'none',
					})
					return
				}
				if (!data.content) {
					uni.showToast({
					  title: '请上传相关资质',
					  icon: 'none',
					})
					return
				}

				that.util.postRequest({
					url:'v1/live/apply_live',
					data
				}).then(res => {
					uni.showToast({
						icon:'none',
						title: res.msg || '发起审核成功'
					})
					if (res.code != 1) return;
					that.data = res.data.live
					
					let t = setTimeout(() => {
						// uni.navigateBack();
						that.getLiveInfo()
						if (that.data.order.id && !that.data.order.pay_time) {
							this.$refs.payTypePopup.show()
						}
						clearTimeout(t)
					}, 500)
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title: err.msg
					})
				})
				
			},
			changePic() {
				let that = this
				let data = that.data
				if (data.examine_state == 1 || data.examine_state ==undefined || data.examine_state == 2) {
					
					that.util.uploadFile().then(res=>{
						that.data.image = res.data.fullurl
						// that.avatar = res.data.fullurl
						// that.saveUserInfo()
					})
				}
				

				return true
			},
			changeMa() {

				let that = this
				let data = that.data
				if (data.examine_state ==undefined || data.examine_state == 2) {
					
					that.util.uploadFile().then(res=>{
						that.data.material = res.data.fullurl
					})
				}
			},
			refreshOrder() {
				let that = this
				that.getLiveInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip-icon{
		width: 24upx;
		height: 24upx;
		margin-right: 16upx;
	}
	.bgmusic-next{
		width: 48upx;
		height: 48upx;
	}
	.video-upload-box{
		width: 100%;
		height: 622upx;
		border-radius: 12upx;
		background: #e4e4e4;
		margin-bottom: 20upx;
		.add-icon{
			width: 92upx;
			height: 92upx;
		}
	}
	.video-name-box{
		width: 100%;
		padding: 42upx 40upx;
		background: #FFFFFF;
		border-radius: 12upx;
		margin-bottom: 20upx;
		.title{
			margin-right: 36upx;
		}
	}
	.video-tip{
		margin-bottom: 32upx;
	}
	.tip-box{
		margin-bottom: 14upx;
		.xing{
			color: #F32B2B;
		}
	}
	.content{
		padding: 30upx;
		width: 100%;
	}
</style>
